<template>
  <div class="progress-query-page">
    <a-card title="请假进度查询" :bordered="false">
      <a-row :gutter="[24, 24]">
        <a-col :span="24">
          <a-card
            v-for="(item, index) in leaveList"
            :key="index"
            :title="`请假单 ${index + 1}`"
            class="leave-card"
          >
            <a-timeline mode="left">
              <a-timeline-item color="green">
                {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }} 申请发送成功
                <a-tag color="green">已提交</a-tag>
              </a-timeline-item>
              <a-timeline-item color="blue">
                待审核
                <div v-if="item.reviewer">审批人：{{ item.reviewer }}</div>
                <a-tag
                  :color="
                    item.reviewStatus === 0 ? 'blue' : item.reviewStatus === 1 ? 'green' : 'red'
                  "
                >
                  {{ LEA_REVIEW_STATUS_MAP[item.reviewStatus] }}
                </a-tag>
              </a-timeline-item>
              <a-timeline-item
                :color="
                  item.reviewStatus === 1 ? 'green' : item.reviewStatus === 2 ? 'red' : 'gray'
                "
              >
                {{
                  item.reviewStatus === 1
                    ? '通过'
                    : item.reviewStatus === 2
                      ? '已拒绝'
                      : '等待最终结果'
                }}
                <div v-if="item.reviewMessage">备注：{{ item.reviewMessage }}</div>
              </a-timeline-item>
            </a-timeline>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="最近记录" :bordered="false">
            <a-list item-layout="horizontal" :data-source="recentRecords">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta
                    :title="item.createTime"
                    :description="`${item.category} | ${LEA_REVIEW_STATUS_MAP[item.status]}`"
                  />
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getLeaveInfoUsingGet } from '@/api/leaveController'
import { LEA_REVIEW_STATUS_MAP, LEA_REVIEW_STATUS_OPTIONS } from '@/constants/LeaveInfo'
import dayjs from 'dayjs'

const searchParams = ref({
  category: undefined,
  reviewStatus: undefined,
})

const leaveList = ref<API.LeaveInfo[]>([])
const recentRecords = ref<Array<{ createTime: string; category: string; status: number }>>([])

const loadData = async () => {
  try {
    const res = await getLeaveInfoUsingGet({
      params: searchParams.value,
    })
    console.log('接口响应数据:', res)

    if (res.data) {
      leaveList.value =
        res.data.data?.map((item) => ({
          ...item,
          reviewTime: item.reviewStatus ? new Date().toLocaleString() : null,
        })) || []

      recentRecords.value = res.data.data?.map((item) => ({
        // 添加安全访问和空值处理
        createTime: item.createTime,
        category: item.category,
        status: item.reviewStatus,
      }))
    }
  } catch (e) {
    console.error('数据加载失败', e)
  }
}

const handleSearch = () => {
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.leave-card {
  margin-bottom: 24px;
  border-radius: 8px;
}

.leave-card :deep(.ant-timeline-item-head) {
  width: 20px;
  height: 20px;
}

.leave-card :deep(.ant-timeline-item-tail) {
  left: 10px;
}

.approver {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  margin-top: 4px;
}

.status-tag {
  margin-top: 8px;
}

.progress-query-page {
  padding: 24px;
}
</style>
